<!DOCTYPE html>
<html lang="ch">
<head>
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{margin-top: 20px;}
        .demo{height: 50px; background-color: skyblue;}
        .box1{padding: 5px; background-color: skyblue;}
        .box2{padding: 5px; background-color: white;}
        .list{width: 200px; height: 200px;background-color: skyblue;overflow: auto;}
        li{height: 100px;}
    </style>
</head>
<body>
    <!-- 总结：vue中的事件修饰符
        1.prevent 阻止默认事件
        2.stop 阻止事件冒泡
        3.once 事件只触发一次
        4.capture 使用事件的捕获模式
        5.self 只有event.target是当前操作的元素时才触发事件
        6.passive 事件的默认行为立即执行，无需等待事件回调执行完毕。异步执行
        修饰符可以连续写：@click.prevent.stop="showInfo"
    -->
    <div id="root">
        <!-- 正常情况 -->
        <a href="http://www.baidu.com" @click="showInfo">正常跳转</a><br>
        <!-- 1.阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">prevent阻止跳转</a>
        
        <!-- 事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件 -->
        <div class="demo" @click="showInfo">
            <button @click="showInfo">点击提示信息</button>
        </div><br>
        <!-- 2.stop阻止冒泡 -->
        <div class="demo" @click="showInfo">
            <button @click.stop="showInfo">stop阻止冒泡</button>
        </div>
        <!-- 3.事件只执行一次 -->
        <button @click.once="showInfo">猛击</button>
        <!-- 4.使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo" @click.self="showInfo">
            <button @click="showInfo">self阻止冒泡</button>
        </div>
        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- scroll是滚动条滚动(上下移动都触发)，passive没有影响 -->
        <!-- wheel是鼠标滚动(滚轮移动就触发)，passive有影响 -->
        <ul @scroll.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#root",
            data:{
                name:"test",
            },
            methods:{
                showInfo(e){
                    alert("hello")                    
                },            
                showMsg(msg){
                    console.log(msg)
                },
                demo(){
                    for (let i = 0; i < 1000; i++) {
                        console.log("*")
                    }
                }
            }
        })
    </script>
</body>
</html>